<template>

  <div class="flex-s">
    <ul class="t_left">
      <li :class="activeKey===index?'active':''" v-for="(item,index) in Config.list" @click="change(index,item.certDetails)">
        <div class="t_type">{{ item.certType }}</div>
        <div class="t_detail">
          <h4>{{ item.certPrintNo }}</h4>
          <p>有效期至：{{ parseTime(item.validEdate) }}</p>
          <p>发证日期：{{ parseTime(item.issueDate) }}</p>
          <p>发证机关：{{ item.issueUnitName }}</p>
        </div>
      </li>
    </ul>
    <ul class="t_right">
      <li v-for="(item,index) in certDetails">
        <div class="d1">
          <p class="h1">{{ item.certName }}</p>
          <p class="p2">
            <span>状态</span>&nbsp;
            <span :style="{color: '#0EC814'}" v-if="item.certState == '1'">可用</span>
            <span :style="{color: '#f00'}" v-else>不可用</span>
          </p>
        </div>
        <div class="d2">
          <p>取得日期&nbsp;&nbsp;{{ parseTime(item.certGetDate) }}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import {defineComponent, inject, onMounted, reactive, toRefs , ref} from 'vue';
import { Table } from 'ant-design-vue';
import { getCorpAptApi  } from '/@/api/foreign';
import { parseTime } from '/@/utils';


export default defineComponent({
  components: {
    Table
  } ,
  setup() {
    const corpId = inject('corpId') as string;
    const activeKey = ref(0);
    const Config = reactive({
      list: [] as any,
      loading: false,
    })
    const certDetails = ref([]);
    const change = (index,data) => {
      activeKey.value =  index;
      certDetails.value = data
    }
    const changeHandler = ( config) => {
      let { loading, list } = toRefs(config);
      loading.value = true;
      getCorpAptApi({ corpId }).then(({ data, success }) => {
        if(success) {
          let { records } = data;
          list.value = records;
          loading.value = false;
          certDetails.value = records[0].certDetails
        }
      })
    }

    const init = () => {
      changeHandler(Config);
    }
    onMounted(init)

    return {
      Config,  changeHandler , parseTime , activeKey , change , certDetails
    }
  }
})
</script>

<style lang="less" scoped>

.t_left{
  width: 484px;
  height: 480px;
  padding-right: 10px;
  overflow: auto;

  li{
    display: flex;
    margin-bottom: 10px;
    color: #333;
    cursor: pointer;
    border: 1px solid #EAEDF3;


    .t_type {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 120px;
      background: #F3F3F3;
    }

    .t_detail {
      flex: 1;
      padding: 22px 30px;

      h4 {
        margin-bottom: 5px;
        font-size: 16px;
      }

      p {
        margin-bottom: 0;
        line-height: 26px;
      }
    }

    &.active {
      border: 1px solid #216DE5;

      .t_type {
        color: white;
        background: #216DE5;

      }
    }
  }


}

.t_right{
  width: 650px;
  height: 480px;
  padding-right: 10px;
  overflow: auto;

  li{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    min-height: 74px;
    padding: 10px 30px;
    margin-bottom: 8px;
    line-height: 26px;
    border: 1px solid #EEE;

    .d1{
      flex: 1;

      .h1{
        margin-bottom: 0;
        font-weight: 600;
      }

      .p2{
        margin-bottom: 0;
      }
    }

    .d2{
      width: 150px;
    }
  }
}


</style>
